<template>
  <j-modal
    title="扩展配置"
    width="1000px"
    :visible="visible"
    :cancelButtonProps="{style:{display:'none'}}"
    @ok="handleOk"
    @cancel="handleCancel">

    <a-form-model ref="form" layout="inline" :model="model" :rules="rules" class="onl-cgform-ext-config-form">
      <a-row :gutter="gutter">
        <a-col :span="7">
          <a-form-model-item label="集成设计表单" v-bind="formItemProps.left">
            <a-radio-group v-model="model.isDesForm" button-style="solid" @change="onIsDesformChange">
              <a-radio-button value="Y">开启</a-radio-button>
              <a-radio-button value="N">关闭</a-radio-button>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="17">
          <a-form-model-item prop="desFormCode" label="表单编码" v-bind="formItemProps.right">
            <a-input v-model="model.desFormCode" style="width: 400px"  :disabled="!isDesform"/>
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- 积木报表打印 -->
      <a-row :gutter="gutter">
        <a-col :span="7">
          <a-form-model-item label="集成积木报表" v-bind="formItemProps.left">
            <a-radio-group v-model="model.reportPrintShow" button-style="solid">
              <a-radio-button :value="1">开启</a-radio-button>
              <a-radio-button :value="0">关闭</a-radio-button>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="17">
          <a-form-model-item prop="reportPrintUrl" label="报表地址" v-bind="formItemProps.right">
            <a-input v-model="model.reportPrintUrl" style="width: 400px" :disabled="!isReportPrint"/>
          </a-form-model-item>
        </a-col>
      </a-row>

      <!-- 启用联合查询 -->
      <a-row :gutter="gutter">
        <a-col :span="7">
          <a-form-model-item label="启用联合查询" v-bind="formItemProps.left">
            <a-radio-group v-model="model.joinQuery" button-style="solid" @change="handleChangeJoinQuery">
              <a-radio-button :value="1">开启</a-radio-button>
              <a-radio-button :value="0">关闭</a-radio-button>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="gutter">
        <a-col :span="7">
          <a-form-model-item label="弹窗默认全屏" v-bind="formItemProps.left">
            <a-radio-group v-model="model.modelFullscreen" button-style="solid" >
              <a-radio-button :value="1">开启</a-radio-button>
              <a-radio-button :value="0">关闭</a-radio-button>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="17">
          <a-form-model-item label="弹窗宽度" v-bind="formItemProps.right">
            <a-input-number v-model="model.modalMinWidth" placeholder="弹窗最小宽度（单位：px）" style="width: 400px"/>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>

  </j-modal>
</template>

<script>

export default {
  name: 'OnlCgformHeadExtConfigModel',
  props: {
    form: Object,
    model: Object,
  },
  data() {
    return {
      gutter: 8,
      visible: false,

      // formItem 的绑定值，统一布局
      formItemProps: {
        left: {
          labelCol: {span: 11},
          wrapperCol: {span: 13},
          style: {width: '100%'},
        },
        right: {
          labelCol: {span: 3},
          wrapperCol: {span: 20},
          style: {width: '100%'},
        },
      },
    }
  },
  computed: {
    // 是否使用表单设计
    isDesform() {
      return this.model.isDesForm === 'Y'
    },
    // 是否启用报表打印
    isReportPrint() {
      return !!this.model.reportPrintShow
    },
    // 校验字段
    rules() {
      return {
        desFormCode: [{required: this.isDesform, message: '请输入表单设计器编码！'}],
        reportPrintUrl: [{required: this.isReportPrint, message: '请输入报表地址！'}],
      }
    },
  },
  watch: {
    // 当校验变化时，清空变化的校验字段
    rules(rules) {
      let clearKey = []
      Object.keys(rules).forEach(key => {
        let rule = rules[key][0]
        if (rule.hasOwnProperty('required') && !rule.required) {
          clearKey.push(key)
        }
      })
      if (clearKey.length > 0 && this.$refs.form) {
        this.$refs.form.clearValidate(clearKey)
      }
    },
  },
  methods: {

    open() {
      this.visible = true
    },

    handleOk() {
      this.close()
    },
    handleCancel() {
      this.close()
    },
    async close() {
      this.$refs.form.clearValidate()
      await this.$nextTick()
      this.$refs.form.validate((ok, err) => {
        if (ok) {
          this.visible = false
        }
      })
    },

    // 对接表单设计更改事件
    onIsDesformChange(event) {
      let value = event.target.value
      if (value === 'Y') {
        let {themeTemplate} = this.form.getFieldsValue(['themeTemplate'])
        if ('erp' === themeTemplate) {
          this.form.setFieldsValue({themeTemplate: 'normal'})
          this.$message.warning('请注意：erp风格不支持对接表单设计，已自动改为默认风格！')
        }
      }
    },

    // 联合查询更改事件
    handleChangeJoinQuery(event) {
      let value = event.target.value
      if (value === 1) {
        let {themeTemplate, isTree, tableType} = this.form.getFieldsValue(['themeTemplate', 'isTree', 'tableType'])
        if ('erp' === themeTemplate) {
          this.$message.warning('请注意：erp风格不支持联合查询，配置无效!')
          this.model.joinQuery = 0
        }
        if ('innerTable' === themeTemplate) {
          this.$message.warning('请注意：内嵌风格不支持联合查询，配置无效!')
          this.model.joinQuery = 0
        }
        if (1 === tableType) {
          this.$message.warning('请注意：单表不支持联合查询，配置无效!')
          this.model.joinQuery = 0
        } else if (3 === tableType) {
          this.$message.warning('请注意：当前表为附表，请在对应主表配置!')
          this.model.joinQuery = 0
        } else if ('Y' === isTree) {
          this.$message.warning('请注意：树形列表不支持联合查询，配置无效!')
          this.model.joinQuery = 0
        }
      }
    },

  },
  model: {prop: 'model', event: 'change'},
}
</script>

<style scoped lang="less">
.onl-cgform-ext-config-form.ant-form-inline {
  /deep/ .ant-form-item {
    margin-bottom: 8px;
  }
}
</style>